<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		
		/* inset <偏移-x> ,<偏移-y> , <羽化半径>， <缩放> */
			.shadow{
				
				/* box-shadow:  10px 10px rgba(0,0,0,.4); */
				/* box-shadow: inset 10px 10px rgba(0,0,0,.4); */
				/* box-shadow:  50px 10px rgba(0,0,0,.4); */
				/* box-shadow:  10px 50px rgba(0,0,0,.4); */
				
				width: 200px;
				height: 200px;
				border: 1px  solid black;
			}
			
			.b {
				/* 羽化半径 */
				/* box-shadow:  10px 10px 20px rgba(0,0,0,.6); */
				box-shadow:  0px 10px 20px  rgba(0,0,0,.6);
				
			}
			
			
			.c{
				/* 缩放*/
				box-shadow:  10px 10px 0px 15px rgba(0,0,0,.6);
				
			}
		</style>
	</head>
	<body>
		
		
		<div class="shadow b">
		</div>
		
		
		
		
	<!-- 	<div class="shadow c">
		</div> -->
		
		<strong></strong>
	</body>
</html>
